import React, { Component } from 'react';
import { connect } from 'dva';
import { Button, Select } from 'antd';
import './detail.css';

const { Option } = Select;

// 组件
import ResizTable from './../../../components/Table/table';
import LittleModel from './../../../components/LittleModel/littleModel';

@connect(({ list, loading }) => ({
    skuData: list.skuDetailData.data,
    loading: loading.models.list,
    serviceRate: list.serviceRate.data
  }))
class SkuDetail extends Component {
    constructor() {
        super();
        this.state = {
            tableWidth: 900,
            changeModal: false,
            // 修改点击时显示的数据
            cityId: '',
            agentId: ''
        };
        this.detailColumns = [
            {
                title: '城市',
                dataIndex: 'cityId',
                width: 200,
            },
            {
                title: '名称',
                dataIndex: 'agentId',
                width: 200,
            },
            {
                title: '服务费率(%)',
                dataIndex: 'rateVal',
                width: 200,
            },
            {
                title: '操作',
                width: 200,
                render: (text, record, index) => {
                    return (
                        <div>
                            <Button type="primary" onClick={() => this.showChangeModal(text, index)}>修改</Button>
                        </div>
                    );
                }
            }
        ];
    }

    // 显示修改的弹出页面
    showChangeModal(data, index) {
        console.log(data);
        const { dispatch } = this.props;
        dispatch({
            type: 'list/queryRate',
            payload: {
                agentId: null
            },
            url: '/web/sku/getSkuRateList2'
        });
        this.setState({
            cityId: data.cityId,
            agentId: data.agentId,
            changeModal: true
        });
    }

    // 关闭修改模态框
    hideChangeModal = () => {
        this.setState({
            changeModal: false,
            cityId: '',
            agentId: '',
        });
    }

    render() {

        const {
            skuData,
            loading,
            serviceRate
        } = this.props;
        console.log(serviceRate);
        const total = skuData ? skuData.rateCity.length : 0;
        return (
            <div>
                {/* 商品sku详情 */}
                <div className="formTitle">商品sku</div>
                <div className="table-responsive">
                    <table className="table table-bordered">
                        <thead>
                            <tr style={{ textAlign: "center" }}>
                                <th style={{ width: 150 }}>sku编号</th>
                                <th style={{ width: 120 }}>一级分类</th>
                                <th style={{ width: 120 }}>二级分类</th>
                                <th style={{ width: 120 }}>三级分类</th>
                                <th style={{ width: 150 }}>商品名称</th>
                                <th style={{ width: 150 }}>生产厂家</th>
                                <th style={{ width: 150 }}>品牌/品类</th>
                                <th style={{ width: 150 }}>产地</th>
                                <th style={{ width: 150 }}>规格</th>
                                <th style={{ width: 150 }}>描述</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr style={{ textAlign: "center" }}>
                                <td>{skuData ? skuData.unitCode : ""}</td>
                                <td>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[0].name : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[0].brand : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[0].code : ""}</div>
                                </td>
                                <td>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[1].name : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[1].brand : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[1].code : ""}</div>
                                </td>
                                <td>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[2].name : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[2].brand : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[2].code : ""}</div>
                                </td>
                                <td>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[3].name : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[3].brand : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[3].code : ""}</div>
                                </td>
                                <td>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[4].name : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[4].code : ""}</div>
                                </td>
                                <td>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[5].name : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[5].code : ""}</div>
                                </td>
                                <td>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[6].name : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[6].code : ""}</div>
                                </td>
                                <td>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[7].name : ""}</div>
                                    <div>{skuData ? JSON.parse(skuData.fullName)[7].code : ""}</div>
                                </td>
                                <td>
                                    <div>{skuData ? skuData.description : ""}</div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                {/* 数据列表 */}
                <div className="formTitle">数据列表</div>
                <ResizTable 
                    dataSource={ skuData ? skuData.rateCity : []} 
                    columns={this.detailColumns} 
                    width={this.state.tableWidth} 
                    total={total} 
                    isLoading={loading} 
                    dispatch={this.props.dispatch}
                    isRequest={0}
                />
                {/* 点击修改显示弹出框 */}
                <LittleModel
                    title="修改"
                    isShow={this.state.changeModal}
                    closeModal={this.hideChangeModal}
                >
                    <div className="table-responsive">
                        <table className="table table-bordered">
                            <thead>
                                <tr style={{ textAlign: "center" }}>
                                    <th style={{ width: 100 }}>城市</th>
                                    <th style={{ width: 100 }}>子公司</th>
                                    <th style={{ width: 200 }}>服务率(%)</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr style={{ textAlign: "center", height: 40 }}>
                                    <td style={{ verticalAlign: 'middle!important' }}>{this.state.cityId}</td>
                                    <td style={{ verticalAlign: 'middle!important' }}>{this.state.agentId}</td>
                                    <td style={{ verticalAlign: 'middle!important' }}>
                                        <Select style={{ width: '100%' }} defaultValue="">
                                            <Option key="" value="">请选择</Option>
                                            {
                                                serviceRate ? serviceRate.map(function(item, index) {
                                                    return (
                                                        <Option key={index} value={item.id}>{item.rateName}</Option>
                                                    );
                                                }) : null
                                            }
                                        </Select>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </LittleModel>
            </div>
        );
    }
}

export default SkuDetail;